import { Image, Avatar, Table, Tooltip } from "antd";
import { ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh, IconGlobeStroke, IconEyeOpened } from "@douyinfe/semi-icons";
import { useModel } from "umi";
import Jdenticon from "react-jdenticon";
import { format } from "timeago.js";
import { useEffect } from "react";

import useApplication from "../../hooks/organization/useApplication";

const { Column } = Table;

const ApplicationDetailTypes = ({ application }) => {
    const { kuboUrl } = useModel("kubo");
    const { dataLoading, clients, loadApplicationClients } = useApplication();

    const loadDate = () => {
        loadApplicationClients(application.appUuid);
    };

    useEffect(() => {
        application?.appUuid && loadDate();
    }, [application?.appUuid]);

    const TableHeader = () => {
        return (
            <div style={{ display: "flex", justifyContent: "space-between" }}>
                <div style={{ lineHeight: "32px" }}>应用终端信息</div>
                <ButtonGroup>
                    <Button icon={<IconRefresh />} onClick={loadDate}></Button>
                </ButtonGroup>
            </div>
        );
    };

    const renderIcon = (_, r, i) => {
        let icon =
            kuboUrl && _ ? (
                <Image width={20} src={kuboUrl + _} preview={false} style={{ padding: "5px 0 " }} />
            ) : (
                <div style={{ padding: "3px 0 " }}>
                    <Jdenticon size="24" value={application.appName} />
                </div>
            );
        return <Avatar shape="square" icon={icon} size={32} style={{ backgroundColor: r.appBgco || "#FFA500" }} />;
    };

    const renderOpenEye = (_) =>
        _ && (
            <Tooltip title={_}>
                <a onClick={(e) => electron.shell.openExternal(_)}>
                    <IconGlobeStroke />
                </a>
            </Tooltip>
        );

    const renderEye = (_) =>
        _ && (
            <Tooltip title={_}>
                <IconEyeOpened />
            </Tooltip>
        );

    const renderTime = (_) => _ && <Tooltip title={formatUTCTime(_, "YYYY年MM月DD日 HH:ss:mm")}>{format(formatUTCTime(_), "zh_CN")}</Tooltip>;

    const renderOpen = (_, r, i) => (_ ? "正常" : "禁用");

    return (
        <Table loading={dataLoading} title={TableHeader} dataSource={clients} rowKey={"nodeId"} size="small" bordered pagination={false}>
            <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
            <Column title="图标" dataIndex="appIcon" align="center" render={renderIcon} />
            <Column title="类型" dataIndex="appType" align="center" render={(_, r) => (r.appDesc ? <Tooltip title={r.appDesc}>{_}</Tooltip> : _)} />
            <Column title="路径" dataIndex="appPath" align="center" render={renderEye} />
            <Column title="Git地址" dataIndex="appGitlab" align="center" render={renderEye} />
            <Column title="网址" dataIndex="appGiturl" align="center" render={renderOpenEye} />
            <Column title="当前版本" dataIndex="appVeno" align="center" render={(_) => <span style={{ fontSize: 16 }}>{_}</span>} />
            <Column title="代码大小" dataIndex="appCodesize" align="center" render={(_) => (_ ? helper.byteConvert(parseInt(_)) : "")} />
            <Column title="上线时间" dataIndex="appPubtime" align="center" render={renderTime} />
            <Column title="是否开启" dataIndex="appOpen" align="center" width={100} render={renderOpen} />
        </Table>
    );
};

export default ApplicationDetailTypes;
